<template>
    <div class="mr-root">
        <BackHeader>人气排行榜</BackHeader>
        <loading v-if="showLoading"></loading>
        <back-top></back-top>
        <div class="moods">
            <div v-for=" (a,index) in list">
                <router-link :to="/Category/+a.id+'/'+a.updateInfo">
                    <span class="bp">{{index+1}}</span>
                    <div class="one">
                        <img :src=a.images alt="" class="two">
                        <div class="three">
                            <h4>{{a.name}}</h4>
                            <p class="four"><i class="fa fa-user-o"></i>{{a.author}}</p>
                            <p class="five">{{a.updateInfo}}</p>
                            <p class="four">简介：{{a.introduction}}</p>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
  import BackHeader from '../commpoents/BackHeader'
  import Loading from '../commpoents/Loading'
  import BackTop from '../commpoents/BackTop'
  export default{
      data(){
          return{
              list:[],
              showLoading:true
          }
      },
      components:{
          BackHeader,Loading,BackTop
      },
      created(){
          this. popularity()
      },
      methods:{
 popularity(){
          this.axios.get('https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=11&page=1&size=10')
        .then(data=>{
             this.list=this.list.concat(data.data.results)
              setTimeout(() => {
                    this.showLoading = false
                },300)
          
        })
        .catch(err=>{
            console.log(err)
          
        })
 }
 }
      }

</script>
<style scoped>
    .one {
        width: 100%;
        height: auto;
        display: flex;
    }
    
    .two {
        width: 30%;
        height: 30%;
        margin-right: 0.4rem;
    }
    
    .three {
        width: 55%;
    }
    
    .four {
        color: #999999;
    }
    
    .five {
        color: #666666;
    }
    
    .bp {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: red;
        text-align: center;
        color: white;
        line-height: 0.7rem;
        font-size: 0.5rem;
        position: relative;
        top: 1rem;
    }
    
    .moods {
        margin-top: 40px;
        padding-left: 1rem;
        margin-bottom: 44px;
    }
</style>